<template>
  <el-dropdown
    id="const-set-column"
    trigger="click"
    :hide-on-click="false"
    placement="bottom-start"
    @visible-change="visiChange"
  >
    <el-button type="primary">
      设置展示列<i class="el-icon-arrow-down el-icon--right"></i>
    </el-button>
    <el-dropdown-menu slot="dropdown" class="const-set-column-list">
      <el-checkbox-group v-model="choose">
        <el-checkbox
          v-for="item in nameList"
          :key="item.value"
          :label="item.value"
          >{{ item.label }}</el-checkbox
        >
      </el-checkbox-group>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: 'selectColumn',
  msg: '',
  props: {
    nameList: {
      type: Array,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      choose: []
    }
  },
  mounted() {},
  methods: {
    setChoose(ary) {
      this.choose = [...ary]
    },
    visiChange(flog) {
      if (!flog) {
        //隐藏时触发
        this.$emit('setColumn', this.choose)
      }
    }
  }
}
</script>

<style lang="less">
#const-set-column {
  float: right;
}
.const-set-column-list {
  label.el-checkbox {
    display: block;
    line-height: 26px;
    margin: 0 8px;
  }
}
</style>
